<template>

	<!--index.wxml-->
	<view class="container margin">
		<!-- 顶部搜索 -->
		<view class="row search-view" @click="toSearch">
			<input disabled placeholder="请输入商家名称关键词"></input>
			<image class="auto-left" :src="url+'/static/imgs/search.png'"></image>
		</view>
		<!-- 上次去过的店 -->
		<view class="col browse-history">
			<view class="row title">
				<text>上次去过的店</text>
			</view>
			<view v-if="history.length!=0">
				<swiper class="swiper-more" :indicator-dots="false" :display-multiple-items="displayMultipleItems" @change="swiperChange" 
				 v-if="displayMultipleItems>=3" circular>
					<swiper-item class="row" v-for="(item,index) in history" :key="index" @click="toStoreHome" :data-id="item.id">
						<view :class="[index==currentHistoryIndex ? 'active' : '', 'col li']">
							<image :src="item.store_pic" mode="aspectFill"></image>
							<text>{{item.store_name}}</text>
						</view>
					</swiper-item>
				</swiper>

				<swiper class="swiper-one" :indicator-dots="false" circular v-else>
					<swiper-item class="row" v-for="(item,index) in history" :key="index" @click="toStoreHome" :data-id="item.id">
						<view class="col w-100">
							<image :src="item.store_pic" mode="aspectFill"></image>
							<text>{{item.store_name}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="history.length==0" class="hostory_noe">
				<image src="../../static/imgs/queshengye.png"></image>
				<text>你还没有去过任何店铺哦</text>
			</view>
		</view>
		<image class="banner" :src="url+'/static/imgs/banner-1.png'" mode="aspectFill" @click="UsinessmenTextTap"></image>
		<!-- 我收藏的店 -->
		<view class="col collect">
			<view class="row title">
				<text>我收藏的店</text>
			</view>
			<storeRowList :listData="collect"></storeRowList>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import demo from '../../components/demo.vue';
	import storeRowList from '../../components/storeRowList.vue';
	import common from '../../common/js/function.js';
	import http from '../../common/js/request.js';
	export default {
		data() {
			return {
				currentHistoryIndex: 1,
				url: app.globalData.baseImgUrl,
				history: null,
				collect: [],
				displayMultipleItems: 3
			}
		},
		components: {
			demo,
			storeRowList
		},
		onLoad() {
			var that = this;
			
		},
		onShow() {
			var that = this;
			app.globalData.init(() => {
				that.getHistoryData();
				that.getCollectStore();
				var time=parseInt(Date.parse(new Date()))-parseInt(uni.getStorageSync("timeLimit").currentTime)
				// console.log(time,"86400000")
				// console.log(86400000-time)
				if(time<86400000){
					app.globalData.storeId = uni.getStorageSync("timeLimit").storeId;
					uni.switchTab({
						url: '/pages/store/home/home'
					});
				}
			});
		},
		methods: {
			//商家入驻富文本
			UsinessmenTextTap(){
				uni.navigateTo({
					url:"../richtext/richtext"
				})
			},
			getHistoryData() {
				var that = this;
				http.post('/api/v1/index/get_last_store_list', {}, res => {
					that.history = res.datas;
					if (that.history.length < 3) {
						that.displayMultipleItems = 1;
						that.currentHistoryIndex = 0;
					}
				});
			},
			getCollectStore() {
				var that = this;
				http.post('/api/v1/index/get_col_store_list', {}, res => {
					that.collect = res.datas;
				});
			},
			swiperChange(e) {
				var that = this;
				if (that.displayMultipleItems < 3) {
					that.currentHistoryIndex = e.detail.current
				} else {
					that.currentHistoryIndex = e.detail.current + 1
				}

			},
			toStoreHome(e) {
				console.log(e);
		
				// common.verifyAuth(() => {
					app.globalData.storeId = e.currentTarget.dataset.id;
					uni.switchTab({
						url: '/pages/store/home/home'
					});
				// });
			},
			toSearch() {
				// common.verifyAuth(() => {
					uni.navigateTo({
						url: '/pages/search/home/home'
					});
				// });
			},
			onShareAppMessage() {
			
			}
		},
	}
</script>

<style>
	/**index.wxss**/

	.hostory_noe image{
		width: 200rpx;
		height: 200rpx;
		display: block;
		margin: 0 auto;
	}
	.hostory_noe text{
		display: block;
		font-size: 32rpx;
		text-align: center;
		color: #999;
	}
	.search-view {
		margin: 24rpx 0rpx;
		height: 80rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 10rpx;
		align-items: center;
		padding: 0rpx 45rpx;
		font-size: 28rpx;
	}

	.search-view image {
		width: 28rpx;
		height: 28rpx;
	}

	.title text {
		font-weight: bold;
		font-size: 30rpx;
		color: #333;

		/* background: transparent;
		border-bottom: 8rpx transparent solid;
		border-top:none;
		border-image: linear-gradient(to right, #ff9d11, #fff) 1 10;
		border-image: -moz-linear-gradient(to right, #ff9d11, #fff) 1 10;
		border-image: -webkit-linear-gradient(to right, #ff9d11, #fff) 1 10; */

		padding-bottom: 10rpx;
		background: url('') no-repeat left bottom;
		background-size: 100% 8rpx;
		margin: 18rpx 0rpx;
	}

	.banner {
		width: 100%;
		height: 280rpx;
		border-radius: 8rpx;
		margin: 24rpx 0rpx;
	}

	/* 去过的店 */
	.swiper-more {
		width: 100%;
		height:305rpx;
		
	}

	.swiper-one {
		width: 100%;
		height: 368rpx;
	}

	.li {
		align-items: center;
		justify-content: center;
		width: 220rpx;
		margin: 0 auto;
	/* 	height: 252rpx; */
		transform: scale(0.9);
	}

	.w-100 {
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.li text,
	.w-100 text {
		font-size: 26rpx;
		margin-top:24rpx;
	}

	.w-100 image {
		width: 100%;
		height: 316rpx;
		border-radius: 10rpx;
		display: block;
	}

	.li image {
		width: 100%;
		height: 210rpx;
		border-radius: 10rpx;
		display: block;
	}

	.active {
		transform: scale(1.08);
		transition: all 0.2s ease-in 0s;
		z-index: 20;
	}
</style>
